<!--
  * 司机对账明细
  *
-->
<template>
  <div>
    <a-table :dataSource="tableData" :columns="columns" :pagination="false" rowKey="id" size="small" bordered>
      <template #bodyCell="{ text, record, column }">
        <template v-if="column.dataIndex === 'return_num'">
          {{ text || 0 }}
        </template>
        <template v-if="column.dataIndex === 'return_amount'">
          {{ text || '0.00' }}
        </template>
      </template>
    </a-table>
  </div>
</template>
<script setup lang="ts">
import { reactive, ref, watch } from 'vue'

const props = defineProps({
  enterpriseId: {
    type: Array,
    default: null
  },
  optionsIndex: {
    type: String,
    default: null
  },
  orderType: {
    type: String,
    default: null
  }
})

// 定义所有列配置
const allColumns = [
  { title: '商品名称', dataIndex: ['goods', 'goods_name'] },
  { title: '规格', dataIndex: ['spec', 'unit_name'] },
  { title: '配送数量', dataIndex: 'num' },
  { title: '配送金额', dataIndex: 'total_price' },
  { title: '签收数量', dataIndex: 'received_number' },
  { title: '签收金额', dataIndex: 'received_money' },
  { title: '回库数量', dataIndex: 'return_num' },
  { title: '回库金额', dataIndex: 'return_amount' }
]

// 表格使用的列（响应式）
const columns = reactive([])

// 监听 orderType 变化
watch(
  () => props.orderType,
  (orderType) => {
    // 当 orderType 为 '2' 时，过滤掉配送相关列
    const filteredColumns = allColumns.filter((column) => {
      if (orderType == '2') {
        return column.dataIndex !== 'num' && column.dataIndex !== 'total_price'
      }
      return true
    })

    // 更新列配置（保留响应性）
    columns.splice(0, columns.length, ...filteredColumns)
  },
  { immediate: true } // 立即执行，处理初始状态
)

// --------------------------- 查询 ---------------------------
const tableData = ref([])

watch(
  () => props.enterpriseId,
  (e) => {
    if (e) {
      tableData.value = e
    }
  },
  { immediate: true }
)
</script>
